<template>
	<view class="topNav flex_r_sb_c" :style="{
		height: sysInfo.height + 'px', 
		paddingTop: sysInfo.top + 'px',
		paddingLeft: '28rpx',
		paddingRight: '28rpx',
		boxSizing: 'border-box',
		background: bgColor,
		width: sysInfo.windowWidth - sysInfo.menuButtonW + 'px',}"
	>
		<view class="topNavLeft flex_r_fs_c">
			<view v-if="showBack" class="backBtn" @click.stop="$tool.goBack()">
				<text class="iconfont iconleftArrow f_34 fw_600"></text>
			</view>
			<view v-if="showTitle && navType === 'index'" class="contentBox f_36 fw_600 margin_t4 flex_r_fs_c">
				<text class="tc_g">月光</text>
				<text class="tc_1 margin_r4 margin_l4">·</text>
				
				<!-- #ifdef MP-WEIXIN -->
				<picker mode="region" @change="bindAddressChange">
					<text class="tc_1">广州</text>
				</picker>
				<!-- #endif -->
				<!-- #ifdef H5 -->
				<text class="tc_1">广州</text>
				<!-- #endif -->
				<view class="down-triangle margin_l8"></view>
			</view>
			<view v-if="showTitle && navType === 'mall'" class="contentBox f_36 fw_600 margin_t4 flex_r_fs_c">
				<view class="f_36 fw_600 tc_1">福利社</view>
			</view>
		</view>
		<view v-if="showSignIn" class="signIn tc_g margin_t4 flex_c_c_c" @click.stop="goDailyCheckin">签到</view>
	</view>
</template>

<script>
	/**
	 * fr-top-nav 自定义头部导航栏
	 * @description 可根据需求自定义头部内容, 宽度根据小程序右上角的胶囊按钮做了适配
	 * 
	 * @property {Boolean} showBack 是否显示返回上一页按钮
	 * @property {String} navType 根据不同的页来显示不同的导航栏内容, 可自定义
	 * @property {Boolean} showSignIn 是否显示签到按钮, 可自定义
	 * @property {String} bgColor 导航栏背景色
	 */
	export default {
		name:"fr-top-nav",
		props: {
			showBack: {
				type: Boolean,
				default: false
			},
			showTitle: {
				type: Boolean,
				default: true
			},
			navType: {
				type: String,
				default: 'index'  // index or mall
			},
			showSignIn: {
				type: Boolean,
				default: false
			},
			bgColor: {
				type: String,
				default: '#FFF'
			},
		},
		data() {
			return {
				sysInfo: this.$tool.sysInfo(),
			};
		},
		methods: {
			goSearch() {
				this.$tool.go('/pages/search/search')
			},
			goBack() {
				uni.navigateBack({
					delta: 1
				})
			},
			goDailyCheckin() {
				this.$tool.go('/pages/user/dailyCheckin')
			},
			bindAddressChange(e) {
				this.$tool.printLog(e)
			},
		},
	}
</script>

<style lang="scss" scoped>
.topNav {
	.topNavLeft {
		.backBtn {
			width: 60rpx;
		}
		.contentBox {
			width: 320rpx;
			.avatar {
				width: 64rpx;
				height: 64rpx;
				border-radius: 50%;
				background-color: #FFF;
			}
		}
	}
	.signIn {
		width: 120rpx;
		height: 64rpx;
		border: 2rpx solid #55AC6B;
		box-sizing: border-box;
		border-radius: 32rpx;
	}
}
/* 倒三角 */
.down-triangle {
   width: 0;
   height: 0;
   border-style: solid;
   border-width: 12rpx 8rpx 0 8rpx;
   border-color:  #111 transparent transparent transparent;
}
</style>
